<template>
  <component :is="view.type" v-bind="view.attrs" class="" v-debug="{vms,models,dataSet}">
    <div v-if="show" class="content" @contextmenu="showConfigModal">
      <template v-for="(item,index) in dataSet.svgList">
        <star-svg :config="item"></star-svg>
      </template>
    </div>
      <pg-modal :dataSet="dataSet"></pg-modal>
  </component>
</template>

<script>
import PgTable from './pg-table.vue';
import ancMixin from './ancMixin'
import PgForm from './pg-form.vue';
import PgTree from './pg-tree.vue';
import PgModal from './svgConfigModal.vue';
export default {
  name:'',
  components: {PgTable, PgForm, PgTree, PgModal},
  mixins:[ancMixin],
  data() {
    return {
      show:true
    };
  },
  props: {},
  watch: {
    'dataSet.svgList':{
      handler: function(){
        this.show = false;
        this.$nextTick(()=>{
          this.show = true;
        })
      },
      deep:true
    }
  },
  computed: {
    view(){
      return {
        type:['starGenView','starTwoView','starThreeView'][0],
        attrs:{
          left:12,
          right:12,
          middle:0,
          minLeftHeight:'600px',
          title:{
              "en-US":'abc',
              "zh-CN": 'abc'
          }[this.G_Locale],
          fontStyle:{
              
          }
        }
      }
    }
  },
  created() {},
  mounted() {
    console.log(this)
  },
  methods: {
    
  }
};
</script>
<style scoped>
.content {
  position: relative;
  width: 100%;
  height:80vh;
}
</style>